import React, { Component } from "react";
import { Card } from "antd";
import * as echarts from "echarts";
class overview extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  option = () => {
    var chartDom = document.getElementsByClassName("main")[0];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "准入设备统计",

        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "物联网终端" },
            { value: 735, name: "BYOD" },
            { value: 580, name: "电脑端" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option1 = () => {
    var chartDom = document.getElementsByClassName("main")[1];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "合规检测统计",

        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "未检测" },
            { value: 735, name: "无风险" },
            { value: 580, name: "存在风险" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option2 = () => {
    var chartDom = document.getElementsByClassName("main")[2];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "item",
      },

      // eslint-disable-next-line no-dupe-keys
      title: {
        text: "状态分布",
        left: "center",
        top: "50%",
        textStyle: {
          text: "80",
          textAlign: "center",
          fill: "#333",
          fontSize: 20,
          fontWeight: 600,
        },
      },

      legend: {
        left: "center",
      },

      series: [
        {
          name: "服务器",
          type: "pie",
          radius: ["30%", "60%"],
          data: [
            {
              value: 50,
              name: "离线",
              itemStyle: { color: "#6495ED" },
            },
            {
              value: 15,
              name: "暂停",
              itemStyle: { color: "#EE82EE" },
            },
            {
              value: 10,
              name: "服务器关机",
              itemStyle: { color: "#00FFFF" },
            },
            {
              value: 8,
              name: "正常",
              itemStyle: { color: "#9400D3" },
            },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option3 = () => {
    var chartDom = document.getElementsByClassName("main")[3];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["e", "e1"],
      },

      xAxis: {
        type: "category",
        name: "时间",
        boundaryGap: false,
        data: [
          "2021-07-13/07:55",
          "2021-07-13/07:56",
          "2021-07-13/07:57",
          "2021-07-13/07:58",
          "2021-07-13/07:59",
          "2021-07-13/08:01",
          "2021-07-13/08:05",
        ],
      },
      yAxis: {
        name: "条数eps",
        type: "value",
      },
      series: [
        {
          name: "e",
          type: "line",
          stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210],
          color: "#87CEEB",
        },
        {
          name: "e1",
          type: "line",
          stack: "Total",
          data: [220, 182, 191, 234, 290, 330, 310],
          color: "#FF4500",
        },
      ],
    };

    option && myChart.setOption(option);
  };
  componentDidMount() {
    this.option();
    this.option1();
    this.option2();
    this.option3();
  }
  render() {
    return (
      <Card>
        <Card>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <Card>
              <div className="main" style={{ width: 550, height: 300 }}></div>
            </Card>

            <Card>
              <div className="main" style={{ width: 550, height: 300 }}></div>
            </Card>
          </div>
        </Card>
        <Card>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <Card>
              <div className="main" style={{ width: 550, height: 300 }}></div>
            </Card>
            <Card>
              <div className="main" style={{ width: 550, height: 300 }}></div>
            </Card>
          </div>
        </Card>
      </Card>
    );
  }
}

export default overview;
